<template>
    <div class="report-page">
        <a-form :form="form" @submit="onSubmit">
            <a-form-item label="制作类型"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-select style="width: 100%;" size="large" 
                    v-decorator="['type1', {
                        initialValue: '2',
                    }]"
                    @change="onChange"
                >
                    <a-select-option value="1">公司</a-select-option>
                    <a-select-option value="2">部门</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="部门名称"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-select style="width: 100%;" size="large" 
                    :disabled="disabled"
                    placeholder="请选择部门"
                    v-decorator="['type2']"
                >   
                    <a-select-option v-for="(item, index) in depts" 
                        :key="index" :value="item.id"
                    >{{item.deptname}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="日期"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-range-picker size="large" @change="onDateChange" style="max-width: 300px;"
                    :locale="locale"
                    :ranges="{ '今天': [moment(), moment()], '最近一周': [moment().startOf('day').subtract(1, 'weeks'), moment()] }"
                    :disabled-date="disabledDate"
                >
                    <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
            </a-form-item>
            <a-form-item :wrapper-col="{offset: 6}">
                <a-button type="primary" html-type="submit" :loading="loading">导出</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
import moment from 'moment';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { getAllDepts, getReport, reportUrl } from '@/services';

export default {
    name: 'Report',
    data(){
        return {
            locale,
            form: this.$form.createForm(this),
            formItemLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 },
            },
            start_time: '',
            end_time: '',
            disabled: false,
            depts: [],
            loading: false,
        }
    },
    mounted(){
        this.getDepts();
    },
    methods: {
        // 日期选择
        moment,
        // 切换类型
        onChange(type){
            if(type === '1') this.disabled = true;
            else this.disabled = false
        },
        onDateChange(data, dataString){
            let start_time = dataString[0] + ' 00:00:00';
            let end_time =  dataString[1] + ' 23:59:59';
            this.start_time = start_time;
            this.end_time = end_time;
        },
        // 不可选日期
        disabledDate(current){
            return current && current > moment().endOf('day');
        },
        // 导出按钮
        onSubmit(e){
            e.preventDefault();
            const _that = this;
            this.form.validateFields((err, values) => {
                if (!err) {
                    let id = 0;
                    const { type1, type2 } = values;
                    if(type1 === '2') {
                        if(!type2) {
                            _that.$message.error('请选择部门', 1);
                            return;
                        }
                        id = type2
                    }
                    _that.onGetReport(id);
                }
            })
        },
        // 导出报表
        async onGetReport(id){
            try{
                window.location.href = `${reportUrl}${id}`;
            }catch(err){
                console.log('111', err)
            }
        },
        // 获取所有部门
        async getDepts(){
            let res = await getAllDepts();
            if(res.responseObject) {
                this.depts = res.responseObject;
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .report-page{
        margin: 20px auto 0;
        width: 400px;
    }
</style>